 <template>
  <span :class="['nes-text', typeClass]" :style="textStyle">
    <slot />
  </span>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  type: { type: String, default: 'default' }, // primary, success, warning, error, disabled, default
  size: { type: [String, Number], default: '18px' }, // 字体大小
  color: { type: String, default: '' }, // 自定义颜色
  font: { type: String, default: 'Press Start 2P, zpix' }, // 像素风字体
})

const typeClass = computed(() => {
  if (!props.type || props.type === 'default') return ''
  return `is-${props.type}`
})

const textStyle = computed(() => {
  const style = {}
  style.fontFamily = props.font
  style.fontSize = typeof props.size === 'number' ? props.size + 'px' : props.size
  if (props.color) style.color = props.color
  return style
})
</script>

<style scoped>
.nes-text {
  font-family: 'Press Start 2P', 'zpix';
  letter-spacing: 1px;
  user-select: text;
}
</style>
